<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
/** 接收iframe参数 */
interface InGetiframe {
  /** 视频端口 */
  videoPort: string;
  /** rtsp端口 */
  rtspPort: string;
  /** 煤堆序号,空值时默认1 */
  coal: "1" | "2";
}
/** 数据 */
interface InState {
  /** 数据状态 */
  loading: boolean;
  /** iframe地址 */
  iframeUrl: string;
  /** 视频ip */
  videoIp: string;
  /** 选中视频窗口数据 */
  currentData: InGetiframe;
}
let state = ref<InState>({
  loading: false,
  iframeUrl: "",
  videoIp: "10.104.176.199",
  currentData: {
    videoPort: "",
    rtspPort: "",
    coal: "1"
  }
})
const pageTabs = ['1#煤场','2#煤场']
const pagetabsIndex = ref(0)
function clickPageTabs(index:number){
    pagetabsIndex.value = index
}

const videoListData = ref(4)
/** iframe组件 */
const videoSplit = ref<HTMLIFrameElement | null>();

const router = useRouter()
const route = useRoute()
/** 生命周期 */
onMounted(() => {
  // ?id=10.104.176.199:8055_5541&rc=true&coal=1&login=false
  const coal = route.query.coal;
  if (coal) {
    pagetabsIndex.value = parseInt(coal as string) - 1;
  }
    state.value.iframeUrl = `${window.location.origin}/coalyard/video/infraredSplit.html?id=${state.value.videoIp}:8055_5541`;
  initGetMessage();
})
function gotoVideoInfo(){
    state.value.iframeUrl = "";
    router.push(`/stock/infraredInfo?id=${state.value.videoIp}:${state.value.currentData.videoPort}_${state.value.currentData.rtspPort}&coal=${state.value.currentData.coal}`);
}
/** 获取iframe消息 */
function initGetMessage() {
  // 设置监听器来接收来自iframe的消息
  window.addEventListener('message', (event: { data: InGetiframe; origin: string }) => {
      // 确保消息来源可靠
      if (event.origin !== window.location.origin) return;
      // 处理接收到的数据
      console.log("接收到的数据:", event);
      if (event.data.rtspPort) {
        state.value.currentData = event.data;
        gotoVideoInfo();
      }
  });
}

</script>
<template>
    <div class="bg_black">
        <ul class="page_black_tabs">
            <li v-for="(item,index) in pageTabs" :class="pagetabsIndex == index?'hover':''" @click="clickPageTabs(index)">{{ item }}</li>
        </ul>
        <div id="parentVideo" style="height: calc(100vh - 154px)">
          <iframe v-if="state.iframeUrl" :src="`${state.iframeUrl}&rc=true&coal=${pagetabsIndex + 1}&login=true`" frameborder="0" width="100%" height="100%"></iframe>
        </div>
    </div>
</template>
<style scoped lang="scss">
.video_list{
    margin: 3px 20px 20px;
    background: #45424A;
    padding:15px 15px 0;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
    li{
        width: 49.2%;
        position: relative;
        margin-bottom: 15px;
        &.nine{
            width: 32.333%;
        }
        p{
            position: absolute;
            left:0;
            top:0;
            right: 0;
            color:#fff;
            font-size: 15px;
            line-height: 30px;
            padding:0 20px;
            background: rgba(0,0,0,0.4);
        }
        img{
            width: 100%;
            height: 360px;
            object-fit: cover;
        }
    }
}
.split_screen{
    display: flex;
    align-items: center;
    margin: 20px 20px 0;
    background: #45424A;
    height: 40px;
    .name{
        flex-shrink: 0;
        font-size: 16px;
        color: #FFFFFF;
        padding:0 15px;
    }
    img{
        flex-shrink: 0;
        margin-right: 20px;
        cursor: pointer;
        opacity: 0.5;
        &.hover{
            opacity: 1;
        }
    }
}
</style>